<template>
	<div class="more-text" :class="{ open: isOpen }" :style="{ 'max-height': maxHeight + 'px' }">
		<slot />
		<el-link type="primary" @click="isOpen = true" class="btn-more">
			<i class="el-icon-more" />
		</el-link>
	</div>
</template>
<script>
export default {
	name: "cl-more-text",
	props: {
		maxHeight: {
			type: Number,
			default: 100
		}
	},
	data() {
		return {
			isOpen: false
		};
	},
	mounted() {
		if (this.$el.clientHeight >= this.$el.scrollHeight) {
			this.isOpen = true;
			console.log(this.$el.innerText);
		}
	}
};
</script>
<style lang="scss" scoped>
.more-text {
	position: relative;
	overflow: hidden;
	&.open {
		max-height: none !important;
		.btn-more {
			display: none;
		}
	}

	.btn-more {
		position: absolute;
		display: block;
		bottom: 1px;
		right: 8px;
		z-index: 10;
		background-color: #fff;
	}
}
</style>
